<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<!-- 

    
    我们刚才所学的柱状图，散点图，折线图，都是需要在直角坐标系下完成的
    可以对直角坐标系进行配置

    配置1：网格grid
    grid是用来控制直角坐标系的布局和大小,我们的x轴和y轴就是依附于grid来描绘的,可以用来设置图标的位置和大小等   

    配置2：坐标轴axis
    一个坐标轴中最多只有两种位置，x轴和y轴
    坐标轴类型：type
    value：数值轴，自动会从目标中读取数据
    category：类目轴，该类型必须通过data设置类目数据 
    显示位置：position
    xAxis:可取为top和bottom
    yAxis:可取为left和right

    配置3：区域缩放dataZoom
    他可以在toolbox 中的feature结点下打开但是他也可以单独的配置
    dataZoom:[]，他是一个数组类型的,可以配置多个区域缩放器，他的功能比在toolbox中的多


 -->
 
<body>
    <div style="width: 600px; height: 400px;"></div>
</body>
<script>
    var mCharts =echarts.init(document.querySelector('div'))
    var option ={
        dataZoom:[
            {
                type:'slider',
                // type:'inside'
                // 指明产生的作用轴
                xAxisIndex:0
            },
            {
                type:'slider',
                // type:'inside'
                yAxisIndex:0,
                //指明初始状态的缩放情况 区域筛选的范围
                start:0,
                end:80
            }
        ],
        //
        grid:{
            show:true,
            borderWidth:10,
            borderColor:'red',
            left:120,
            top:120,
            width:300,
            height:200
        },
        xAxis:{
            type:'category',
            data:['小明','小花','小华','小菜'],
            position:'top'
        },
        yAxis:{
            type:'value'
        },
        toolbox:{
            feature:{
                dataZoom:{}
            }
        },
        series:[
            {
                name:"语文",
                data:[50,80,75,60],
                type:'bar'
            }
        ]
        
    }

    mCharts.setOption(option)
</script>
</html>